閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：利用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」的課程嘗試在30天內打造網路商城。

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌目標

• http://localhost:8080/#/card_index/card/name（動態路徑）

  • 比如當name是Jason，就跟後端要Jason的資料
  • 比如當name是Neo，就跟後端要Neo的資料

• 以下為測試API

  • https://randomuser.me/documentation#seeds=id (測試用api)

▌方法

• npm install --save axios vue-axios 安裝axios,vue-axios套件

在index.js要引入套件並啟用

import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(axios,vue-axios)

▌ router 設定

用:id當作動態路由

export default new Router({
  routes: [ {
    path: '/card_index',
    name: 'card_index',
    component: card_index,
    children: [ {
      path: 'card/:id',
      name: 'card3',
      component: card3
    }]
  }, {
    path: '/sign',
    name: 'sign',
    component: sign
  }]
})

▌ 分頁設定

• created() ：元件生成時實行方法
• const id = this.$route.params.id ：
• this.$http.get("https://randomuser.me/api/?seed${id}").then(response => {
  console.log(response)});

export default {
  data() {
    return {};
  },
  created() {   //元件生成時實行方法
  
    console.log(this.$route.params.id);
    const id = this.$route.params.id;
    this.$http.get("https://randomuser.me/api/?seed${id}").then(response => {
      console.log(response);
    });
  }
};